<template>
  <a-card :bordered="false">
    <a-tabs @change="callback">
      <a-tab-pane key="1" tab="面料成本">
        <!--table区域-begin-->
        <div>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="fabricdata"
            :pagination="false"
            :loading="loading"
            class="j-table-force-nowrap">

            <template slot="imgSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
              <img v-else :src="getImgView(text)" height="30px" alt=""
                   style="max-width:80px;font-size: 12px;font-style: italic;"/>
            </template>
          </a-table>
        </div>
      </a-tab-pane>

      <a-tab-pane key="2" tab="加价项成本">
        <!--table区域-begin-->
        <div>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns2"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"

            class="j-table-force-nowrap"
            @change="handleTableChange">

            <template slot="htmlSlot" slot-scope="text">
              <div v-html="text"></div>
            </template>

            <template slot="imgSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
              <img v-else :src="getImgView(text)" height="30px" alt=""
                   style="max-width:80px;font-size: 12px;font-style: italic;"/>
            </template>

          </a-table>
        </div>
      </a-tab-pane>

      <a-tab-pane key="3" tab="工艺成本">
        <!--table区域-begin-->
        <div>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns3"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            class="j-table-force-nowrap"
            @change="handleTableChange">

            <template slot="htmlSlot" slot-scope="text">
              <div v-html="text"></div>
            </template>

            <template slot="imgSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
              <img v-else :src="getImgView(text)" height="30px" alt=""
                   style="max-width:80px;font-size: 12px;font-style: italic;"/>
            </template>
            <template slot="fileSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
              <a-button
                v-else
                :ghost="true"
                type="primary"
                icon="download"
                size="small"
                @click="uploadFile(text)">
                下载
              </a-button>
            </template>

            <span slot="action" slot-scope="text, record">
          <a @click="gotodetail(record.orderSn)">查看详情</a>
          <a style="margin-left: 8px;" v-if="Number(record.status) >= 1 && record.status != '11'"
             @click="$router.push({path:'/orderCenter/SingleCBList',query:{orderSn:record.orderSn}})">订单成本</a>
           <a style="margin-left: 8px;" @click="seepaidanSupplierList(record)" v-if="record.status=='1'">派单</a>
          <a-menu-item v-show="record.status=='1'">
                  <a-popconfirm title="确定接单吗?" @confirm="() => orderNow(record.orderSn)">
                    <a style="color:deepskyblue">立即接单</a>
                  </a-popconfirm>
          </a-menu-item>

        </span>
          </a-table>
        </div>
      </a-tab-pane>
      <a-tab-pane key="4" tab="返修成本">
        <!--table区域-begin-->
        <div>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns4"
            :dataSource="dataSource"
            :pagination="false"
            :loading="loading"
            class="j-table-force-nowrap">

            <template slot="htmlSlot" slot-scope="text">
              <div v-html="text"></div>
            </template>

            <template slot="imgSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
              <img v-else :src="getImgView(text)" height="30px" alt=""
                   style="max-width:80px;font-size: 12px;font-style: italic;"/>
            </template>
            <template slot="fileSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
              <a-button
                v-else
                :ghost="true"
                type="primary"
                icon="download"
                size="small"
                @click="uploadFile(text)">
                下载
              </a-button>
            </template>

            <span slot="action" slot-scope="text, record">
          <a @click="gotodetail(record.orderSn)">查看详情</a>
          <a style="margin-left: 8px;" v-if="Number(record.status) >= 1 && record.status != '11'"
             @click="$router.push({path:'/orderCenter/SingleCBList',query:{orderSn:record.orderSn}})">订单成本</a>
           <a style="margin-left: 8px;" @click="seepaidanSupplierList(record)" v-if="record.status=='1'">派单</a>
          <a-menu-item v-show="record.status=='1'">
                  <a-popconfirm title="确定接单吗?" @confirm="() => orderNow(record.orderSn)">
                    <a style="color:deepskyblue">立即接单</a>
                  </a-popconfirm>
          </a-menu-item>

        </span>
          </a-table>
        </div>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>
<script>
  import '@/assets/less/TableExpand.less'
  import {mixinDevice} from '@/utils/mixin'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {getAction} from "../../api/manage";

  export default {
    mixins: [JeecgListMixin, mixinDevice],
    components: {},
    data() {
      return {
        fabricdata: [], // 面料成本列表
        url: {
          list: '/orderCenter/getJiajiaCB', // 加价成本
          fabricList: '/orderCenter/teamFabricCB', //面料成本
        },
        // 面料成本表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '时间',
            align: "center",
            dataIndex: 'createTime'
          },
          {
            title: '面料编号',
            align: "center",
            dataIndex: 'fabricCode'
          },
          {
            title: '数量',
            align: "center",
            dataIndex: 'mishu'
          },
          {
            title: '成本金额',
            align: "center",
            dataIndex: 'allPrice'
          },
          {
            title: '对账金额',
            align: "center",
            dataIndex: 'jiesuanMpney'
          },
          {
            title: '是否对账',
            align: "center",
            dataIndex: 'jiesuan',
            customRender: (text) => {
              if (text == '0') {
                return '未对账'
              } else if (text == '1') {
                return '已对账'
              }
            }
          }
        ],
        // 加价成本列表
        columns2: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '时间',
            align: "center",
            dataIndex: 'createTime'
          },
          {
            title: '成本项',
            align: "center",
            dataIndex: 'costName'
          },
          {
            title: '数量',
            align: "center",
            dataIndex: 'num'
          },
          {
            title: '成本金额',
            align: "center",
            dataIndex: 'price'
          },
          {
            title: '对账金额',
            align: "center",
            dataIndex: 'amountMoney'
          },
          {
            title: '是否对账',
            align: "center",
            dataIndex: 'isAmount',
            customRender: (text) => {
              if (text == '0') {
                return '未对账'
              } else if (text == '1') {
                return '已对账'
              }
            }
          }
        ],

        // 工艺成本列表
        columns3: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '时间',
            align: "center",
            dataIndex: 'createTime'
          },
          {
            title: '工艺名称',
            align: "center",
            dataIndex: 'gyname'
          },
          {
            title: '数量',
            align: "center",
            dataIndex: 'num'
          },
          {
            title: '成本金额',
            align: "center",
            dataIndex: 'costPrice'
          },
          {
            title: '对账金额',
            align: "center",
            dataIndex: 'accountMoney'
          },
          {
            title: '是否对账',
            align: "center",
            dataIndex: 'isDuizhang',
            customRender: (text) => {
              if (text == '0') {
                return '未对账'
              } else if (text == '1') {
                return '已对账'
              }
            }
          }
        ],

        // 返修成本列表
        columns4: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '时间',
            align: "center",
            dataIndex: 'createTime'
          },
          {
            title: '尺寸名称',
            align: "center",
            dataIndex: 'sizeName'
          },
          {
            title: '成本金额',
            align: "center",
            dataIndex: 'costPrice'
          },
          {
            title: '对账金额',
            align: "center",
            dataIndex: 'accountMoney'
          },
          {
            title: '是否对账',
            align: "center",
            dataIndex: 'isDuizhang',
            customRender: (text) => {
              if (text == '0') {
                return '未对账'
              } else if (text == '1') {
                return '已对账'
              }
            }
          }
        ],
      };
    },
    created() {
      this.getFabriclist()
    },
    methods: {

      /**
       * 获取面料成本
       */
      getFabriclist() {
        getAction(this.url.fabricList, {
          'orderSn': this.$route.query.orderSn
        }).then(res => {
          if (res.code == '0') {
            this.fabricdata = res.data
          }
        })
      },

      callback(key) {
        if (key == '1') { // 默认查询面料成本
          this.getFabriclist()
        } else if (key == '2') {
          this.url.list = '/orderCenter/getJiajiaCB?orderSn=' + this.$route.query.orderSn
        } else if (key == '3') {
          this.url.list = '/orderCenter/getGYCB?orderSn=' + this.$route.query.orderSn
        } else if (key == '4') {
          this.url.list = '/orderCenter/getFanxiuCB?orderSn=' + this.$route.query.orderSn
        }
        this.loadData()
      },
    },
  };
</script>